<template>
    <div id="TrainingEnvironmentEdit" class="jx-content">
        <!-- <div class="edit-title">
            {{ trainingName }}实训环境
        </div>
        <mavonEditor style=" margin-top: 25px; " ref="question" v-if="TrainingEditData == ''"></mavonEditor>
        <iframe :src="TrainingEditData" width="100%" height="500px"  frameborder="0" scrolling="auto" v-else></iframe>
        <button class="button-style save-btn" v-if="TrainingEditData == ''">保 存</button> -->
        <div v-if="content == '' || show" >
            <div class="saveBtn">
                <div class="editor fl">
                    <i class="iconfont icon-gongzuoshouce"></i>实训手册编辑
                </div>
                <button class="button-style fr" @click="submitFn" >保存并预览</button>
            </div>
           <div class="ediator">
                <mavonEditor id="EnvironmentEdit" ref="EnvironmentEdit" class="ediator-ev"></mavonEditor>
           </div>
        </div>
        <div v-if="content != '' && !show" style="height: 100%;">
            <div class="fr">
                <button class="button-style saveBtn" @click="repeatFn" v-if=" content != '' ">修改</button>
           </div>
           <div class="iframse">
               <!-- <iframe :src="content" width="1100" height="500" frameborder="0" scrolling="auto"  style='overflow-x:hidden'></iframe> -->
                <div class="markdown-body" v-html="markHtml"></div>
           </div>
        </div>
        <div class="virtual-position" @click="VirtualLink">
            <img src="./../../../assets/images/virtual_link.jpg" />
        </div>
        <el-dialog :close-on-click-modal="false" class="dialog-distribution" title="分配镜像" :visible.sync="dialogDistributionFormVisible"  label-width="100px" width="830px">
            <el-form :model="distributionform" ref="distributionform">
                <el-form-item class="is-required" label="配置类型：">
                    <el-radio-group v-model="distributionform.resource">
                        <el-radio :label="1">单节点</el-radio>
                        <el-radio :label="2">集群</el-radio>
                    </el-radio-group>
                </el-form-item>
                <div class="form-title">{{ distributionform.resource == 1 ? '伪分布' : '主节点'}}</div>
                <!-- 伪分布 -->
                <el-form-item class="config-item" v-if="distributionform.resource == 1">
                    <div class="fl item-config">
                        <el-form-item
                            prop="distributedData.cpuValue"
                            :rules="{
                                required: true, message: '请选择CPU上限', trigger: 'blur'
                            }"
                            label="配置："
                            style=" float:left; width:210px;"
                            class="item-cpu">
                            <el-select v-model="distributionform.distributedData.cpuValue" value-key="value" placeholder="CPU上限">
                                <el-option
                                v-for="item in distributionform.distributedData.cpuOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item
                            prop="distributedData.ramValue"
                            :rules="{
                                required: true, message: '请选择内存上限', trigger: 'blur'
                            }"
                            style="width:110px; float:left; margin-left:10px;">
                            <el-select v-model="distributionform.distributedData.ramValue" placeholder="内存上限">
                                <el-option
                                v-for="item in distributionform.distributedData.ramOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <el-form-item class="fl item-Gpu" label="GPU">
                        <el-switch
                            v-model="distributionform.distributedData.switchValue">
                        </el-switch>
                    </el-form-item>
                </el-form-item>
                <el-form-item class="is-required" label="镜像："v-if="distributionform.resource == 1">
                    <el-cascader
                        :options="distributionform.options0"
                        v-model="distributionform.optionsValue0"
                        :show-all-levels="false"
                        @change="handleItemChange"
                    ></el-cascader>
                </el-form-item>
                <!-- 伪分布end -->
                <!-- 主节点 -->
                <el-form-item class="config-item" v-if="distributionform.resource == 2">
                    <div class="fl item-config">
                        <el-form-item
                            prop="nodeMianData.cpuValue"
                            :rules="{
                                required: true, message: '请选择CPU上限', trigger: 'blur'
                            }"
                            label="配置："
                            style=" float:left; width:210px;"
                            class="item-cpu">
                            <el-select v-model="distributionform.nodeMianData.cpuValue" value-key="value" placeholder="CPU上限">
                                <el-option
                                v-for="item in distributionform.nodeMianData.cpuOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item
                            prop="nodeMianData.ramValue"
                            :rules="{
                                required: true, message: '请选择内存上限', trigger: 'blur'
                            }"
                            style="width:110px; float:left; margin-left:10px;">
                            <el-select v-model="distributionform.nodeMianData.ramValue" placeholder="内存上限">
                                <el-option
                                v-for="item in distributionform.nodeMianData.ramOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <!-- <el-form-item class="fl item-Gpu" label="GPU">
                        <el-switch
                            v-model="distributionform.nodeMianData.switchValue">
                        </el-switch>
                    </el-form-item> -->
                </el-form-item>
                <el-form-item class="is-required" label="镜像："v-if="distributionform.resource == 2">
                    <el-cascader
                        :options="distributionform.options7"
                        v-model="distributionform.optionsValue7"
                        :show-all-levels="false"
                        @change="handleItemChange"
                    ></el-cascader>
                </el-form-item>
                <!-- 伪分布end -->
                <div class="form-title" v-if="distributionform.resource == 2">从节点</div>
                <!-- 镜像配置 -->
                <el-form-item class="config-item" v-if="distributionform.resource == 2">
                    <div class="fl item-config">
                        <el-form-item
                            prop="mirrorConfigData.cpuValue"
                            :rules="{
                                required: true, message: '请选择CPU上限', trigger: 'blur'
                            }"
                            label="配置："
                            style=" float:left; width:210px;"
                            class="item-cpu">
                            <el-select v-model="distributionform.mirrorConfigData.cpuValue" value-key="value" placeholder="CPU上限">
                                <el-option
                                v-for="item in distributionform.mirrorConfigData.cpuOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item
                            prop="mirrorConfigData.ramValue"
                            :rules="{
                                required: true, message: '请选择内存上限', trigger: 'blur'
                            }"
                            style="width:110px; float:left; margin-left:10px;">
                            <el-select v-model="distributionform.mirrorConfigData.ramValue" placeholder="内存上限">
                                <el-option
                                v-for="item in distributionform.mirrorConfigData.ramOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <!-- <el-form-item class="fl item-Gpu" label="GPU">
                        <el-switch
                            v-model="distributionform.mirrorConfigData.switchValue">
                        </el-switch>
                    </el-form-item> -->
                </el-form-item>
                <!-- 镜像配置 -->
                <el-form-item v-if="distributionform.resource == 2" label="从节点数：">
                    <div class="virtual-step">
                        <ul>
                            <li v-for="(item, index) in distributionform.virtualStepList" @click="AddClass(((index+1)*2))" :class="{ active:((index+1)*2) == distributionform.virtualStepCurrent}">{{item.value}}</li>
                        </ul>
                    </div>
                </el-form-item>
                <div class="item-node" v-if="distributionform.resource == 2">
                    <el-form-item class="is-required" label="镜像1：" v-if="distributionform.virtualStepCurrent == 2 ||distributionform.virtualStepCurrent == 4 || distributionform.virtualStepCurrent == 6">
                        <el-cascader
                            :options="distributionform.options1"
                            v-model="distributionform.optionsValue1"
                            :show-all-levels="false"
                            @change="handleItemChange"
                        ></el-cascader>
                    </el-form-item>
                    <el-form-item class="is-required" label="镜像2：" v-if="distributionform.virtualStepCurrent == 2 || distributionform.virtualStepCurrent == 4 || distributionform.virtualStepCurrent == 6">
                        <el-cascader
                            :options="distributionform.options2"
                            v-model="distributionform.optionsValue2"
                            :show-all-levels="false"
                            @change="handleItemChange"
                        ></el-cascader>
                    </el-form-item>
                    <el-form-item class="is-required" label="镜像3：" v-if="distributionform.virtualStepCurrent == 4 || distributionform.virtualStepCurrent == 6">
                        <el-cascader
                            :options="distributionform.options3"
                            v-model="distributionform.optionsValue3"
                            :show-all-levels="false"
                            @change="handleItemChange"
                        ></el-cascader>
                    </el-form-item>
                    <el-form-item class="is-required" label="镜像4：" v-if="distributionform.virtualStepCurrent == 4 || distributionform.virtualStepCurrent == 6">
                        <el-cascader
                            :options="distributionform.options4"
                            v-model="distributionform.optionsValue4"
                            :show-all-levels="false"
                            @change="handleItemChange"
                        ></el-cascader>
                    </el-form-item>
                    <el-form-item class="is-required" label="镜像5：" v-if="distributionform.virtualStepCurrent == 6">
                        <el-cascader
                            :options="distributionform.options5"
                            v-model="distributionform.optionsValue5"
                            :show-all-levels="false"
                            @change="handleItemChange"
                        ></el-cascader>
                    </el-form-item>
                    <el-form-item class="is-required" label="镜像6：" v-if="distributionform.virtualStepCurrent == 6">
                        <el-cascader
                            :options="distributionform.options6"
                            v-model="distributionform.optionsValue6"
                            :show-all-levels="false"
                            @change="handleItemChange"
                        ></el-cascader>
                    </el-form-item>
                </div>
            </el-form>
            <div class="distribution-item" v-if="distributionform.distributionData">
                <div class="jx-course-box">
                    <img :src="distributionform.distributionData.iconUrl" />
                    <span v-text="distributionform.distributionData.imageName"></span>
                </div>
                <div class="jx-course-text" v-text="distributionform.distributionData.description"></div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button class="button-style" @click="DistributionFormSave('distributionform', 1)">保 存</el-button>
                <el-button class="button-style" @click="DistributionFormSave('distributionform', 2)">保存并进入环境</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import mavonEditor from "../../../components/mavonEditor";
    export default {
        components: { mavonEditor },
        data() {
            return {
                //markdown内容
                markHtml:'',
                //内容
                content:'',
                //初始高度
                hei:0,
                show:'',
                // 镜像编辑内容
                TrainingEditData: '',
                // 实训ID
                trainingId: '',
                //分配镜像弹窗
                dialogDistributionFormVisible: false,
                distributionform: {
                    // 类型
                    resource: 1,
                    // 伪分布数组
                    distributedData: {
                        // cpu配置
                        cpuOptions: [
                            {
                                value: '1',
                                label: '1核'
                            },
                            {
                                value: '2',
                                label: '2核'
                            },
                            {
                                value: '4',
                                label: '4核'
                            },
                            {
                                value: '6',
                                label: '6核'
                            },
                            {
                                value: '8',
                                label: '8核'
                            },
                            {
                                value: '10',
                                label: '10核'
                            }
                        ],
                        cpuValue: '',
                        ramOptions: [
                            {
                                value: '1',
                                label: '1G'
                            },
                            {
                                value: '2',
                                label: '2G'
                            },
                            {
                                value: '4',
                                label: '4G'
                            },
                            {
                                value: '6',
                                label: '6G'
                            },
                            {
                                value: '8',
                                label: '8G'
                            },
                            {
                                value: '10',
                                label: '10G'
                            },
                            {
                                value: '12',
                                label: '12G'
                            },
                            {
                                value: '14',
                                label: '14G'
                            },
                            {
                                value: '16',
                                label: '16G'
                            },
                            {
                                value: '32',
                                label: '32G'
                            },
                            {
                                value: '48',
                                label: '48G'
                            },
                            {
                                value: '64',
                                label: '64G'
                            }
                        ],
                        ramValue: '',
                        // GPU
                        switchValue: false
                    },
                    // 镜像配置
                    mirrorConfigData: {
                        // cpu配置
                        cpuOptions: [
                            {
                                value: '1',
                                label: '1核'
                            },
                            {
                                value: '2',
                                label: '2核'
                            },
                            {
                                value: '4',
                                label: '4核'
                            },
                            {
                                value: '6',
                                label: '6核'
                            },
                            {
                                value: '8',
                                label: '8核'
                            },
                            {
                                value: '10',
                                label: '10核'
                            }
                        ],
                        cpuValue: '',
                        ramOptions: [
                            {
                                value: '1',
                                label: '1G'
                            },
                            {
                                value: '2',
                                label: '2G'
                            },
                            {
                                value: '4',
                                label: '4G'
                            },
                            {
                                value: '6',
                                label: '6G'
                            },
                            {
                                value: '8',
                                label: '8G'
                            },
                            {
                                value: '10',
                                label: '10G'
                            },
                            {
                                value: '12',
                                label: '12G'
                            },
                            {
                                value: '14',
                                label: '14G'
                            },
                            {
                                value: '16',
                                label: '16G'
                            },
                            {
                                value: '32',
                                label: '32G'
                            },
                            {
                                value: '48',
                                label: '48G'
                            },
                            {
                                value: '64',
                                label: '64G'
                            }
                        ],
                        ramValue: '',
                        // GPU
                        switchValue: false
                    },
                    // 主节点
                    nodeMianData: {
                        // cpu配置
                        cpuOptions: [
                            {
                                value: '1',
                                label: '1核'
                            },
                            {
                                value: '2',
                                label: '2核'
                            },
                            {
                                value: '4',
                                label: '4核'
                            },
                            {
                                value: '6',
                                label: '6核'
                            },
                            {
                                value: '8',
                                label: '8核'
                            },
                            {
                                value: '10',
                                label: '10核'
                            }
                        ],
                        cpuValue: '',
                        ramOptions: [
                            {
                                value: '1',
                                label: '1G'
                            },
                            {
                                value: '2',
                                label: '2G'
                            },
                            {
                                value: '4',
                                label: '4G'
                            },
                            {
                                value: '6',
                                label: '6G'
                            },
                            {
                                value: '8',
                                label: '8G'
                            },
                            {
                                value: '10',
                                label: '10G'
                            },
                            {
                                value: '12',
                                label: '12G'
                            },
                            {
                                value: '14',
                                label: '14G'
                            },
                            {
                                value: '16',
                                label: '16G'
                            },
                            {
                                value: '32',
                                label: '32G'
                            },
                            {
                                value: '48',
                                label: '48G'
                            },
                            {
                                value: '64',
                                label: '64G'
                            }
                        ],
                        ramValue: '',
                        // GPU
                        switchValue: false
                    },
                    options0: [
                    ],
                    optionsValue0: [],
                    options1: [],
                    optionsValue1: [],
                    options2: [],
                    optionsValue2: [],
                    options3: [],
                    optionsValue3: [],
                    options4: [],
                    optionsValue4: [],
                    options5: [],
                    optionsValue5: [],
                    options6: [],
                    optionsValue6: [],
                    options7: [],
                    optionsValue7: [],
                    virtualStepList: [
                        { value: 2 },
                        { value: 4 },
                        { value: 6 }
                    ],
                    virtualStepCurrent: 2,
                    // 镜像列表数据
                    distributionData: ''
                },
                toolbarsMav: {
                    bold: true, // 粗体
                    italic: false, // 斜体
                    header: true, // 标题
                    //underline: true, // 下划线
                    //strikethrough: true, // 中划线
                    //mark: true, // 标记
                    //superscript: true, // 上角标
                    //subscript: true, // 下角标
                    quote: true, // 引用
                    ol: true, // 有序列表
                    ul: true, // 无序列表
                    imagelink: true, // 图片链接
                    code: true, // code
                    table: true, // 表格
                    help: true, // 帮助
                    alignleft: true, // 左对齐
                    aligncenter: true, // 居中
                    alignright: true, // 右对齐
                    preview: true, // 预览
                    fullscreen: true    // 全屏编辑
                }
            }
        },
        created () {
            let self = this
            // 实训ID
            self.trainingId = self.$localstorage.getLocalStorage('TrainingData').trainingId
            self.trainingName = self.$localstorage.getLocalStorage('TrainingData').trainingName
            // 初始化实训编辑
            self.InitTrainingEdit()

            // 初始化页面高度
            self.$nextTick(() => {
                $('#TrainingEnvironmentEdit').css({
                    'height': $(window).height() - 220 + 'px'
                })
                $('#EnvironmentEdit').css({
                    'height': $(window).height() - 400 + 'px'
                })
                $('#EnvironmentEdit .v-note-wrapper').css({
                    'height': '100%'
                })
            })
        },
        mounted () {
            this.$refs.EnvironmentEdit.toolbars = this.toolbarsMav;
        },
        methods:{
            // 初始化实训编辑
            InitTrainingEdit() {
                let self = this
                // 实训ID
                self.$http.get('/tes/training/manual/'+ self.trainingId).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.markHtml = res.data.htmlContent
                        self.content = res.data.conTent
                    }else if(res.code == '404'){

                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
             //保存并提交
            submitFn(){
                let self = this
                if(self.$refs.EnvironmentEdit.value == ''){
                    self.$message.error('编辑内容不能为空')
                    return
                }
                self.$http.post('/tes/training/manual/'+self.trainingId,{
                     content: self.$refs.EnvironmentEdit.value,
                     htmlContent: self.$refs.EnvironmentEdit.getRender()
                }).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.$message({
                            message: '保存成功',
                            type: 'success'
                        })
                        self.InitTrainingEdit()
                        self.show = false
                        self.content = ''
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //修改
            repeatFn(){
                this.show=true
                // 初始化页面高度
                this.$nextTick(() => {
                    $('#TrainingEnvironmentEdit').css({
                        'height': $(window).height() - 220 + 'px'
                    })
                    $('#EnvironmentEdit').css({
                        'height': $(window).height() - 400 + 'px'
                    })
                    $('#EnvironmentEdit .v-note-wrapper').css({
                        'height': '100%'
                    })
                })
                this.contentFn()
            },
            //获取编辑器内容
            contentFn(){
                let self = this
                self.$http.get('/tes/training/manual/'+ self.trainingId).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.$nextTick(function(){
                            self.$refs.EnvironmentEdit.value = res.data.conTent
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //弹窗step切换
            AddClass(index){
                let self = this
                self.distributionform.virtualStepCurrent = index
            },
            // 跳转到编辑实验镜像页
            VirtualLink() {
                let self = this
                self.$http.get('/tes/image-allocation/image').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.distributionform.options0 = res.data
                        self.distributionform.options1 = res.data
                        self.distributionform.options2 = res.data
                        self.distributionform.options3 = res.data
                        self.distributionform.options4 = res.data
                        self.distributionform.options5 = res.data
                        self.distributionform.options6 = res.data
                        self.distributionform.options7 = res.data
                        // 显示分配镜像弹窗
                        self.dialogDistributionFormVisible = true
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })

                self.$http.get('/tes/image-allocation/training/'+self.trainingId).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        if(res.data.allocated){
                            if(res.data.mode == 1){
                                self.distributionform.resource = res.data.mode
                                // 伪分布取值
                                self.distributionform.distributedData.cpuValue = ""+res.data.cpu+""
                                self.distributionform.distributedData.ramValue = ""+res.data.ram+""
                                self.distributionform.distributedData.switchValue = res.data.gpu

                                self.distributionform.optionsValue0 = [res.data.image.imageSource,res.data.image.imageId]
                                self.handleItemChange(self.distributionform.optionsValue0)
                            }else if(res.data.mode == 2){
                                self.distributionform.resource = res.data.mode
                                // 主节点取值
                                self.distributionform.nodeMianData.cpuValue = ""+res.data.cpu+""
                                self.distributionform.nodeMianData.ramValue = ""+res.data.ram+""
                                self.distributionform.nodeMianData.switchValue = res.data.gpu

                                self.distributionform.optionsValue7 = [res.data.image.imageSource,res.data.image.imageId]
                                // 从节点镜像配置
                                self.distributionform.mirrorConfigData.cpuValue = ""+res.data.slaveCpu+""
                                self.distributionform.mirrorConfigData.ramValue = ""+res.data.slaveRam+""
                                self.distributionform.mirrorConfigData.switchValue = res.data.slaveGpu
                                self.distributionform.virtualStepCurrent = res.data.slaveSize
                                self.$nextTick(() => {
                                    if(res.data.slaveSize == 2){
                                        self.distributionform.optionsValue1 = [res.data.slaveImages[0].imageSource, res.data.slaveImages[0].imageId]
                                        self.distributionform.optionsValue2 = [res.data.slaveImages[1].imageSource, res.data.slaveImages[1].imageId]
                                    }else if(res.data.slaveSize == 4){
                                        self.distributionform.optionsValue1 = [res.data.slaveImages[0].imageSource, res.data.slaveImages[0].imageId]
                                        self.distributionform.optionsValue2 = [res.data.slaveImages[1].imageSource, res.data.slaveImages[1].imageId]
                                        self.distributionform.optionsValue3 = [res.data.slaveImages[2].imageSource, res.data.slaveImages[2].imageId]
                                        self.distributionform.optionsValue4 = [res.data.slaveImages[3].imageSource, res.data.slaveImages[3].imageId]
                                    }else if(res.data.slaveSize == 6){
                                        self.distributionform.optionsValue1 = [res.data.slaveImages[0].imageSource, res.data.slaveImages[0].imageId]
                                        self.distributionform.optionsValue2 = [res.data.slaveImages[1].imageSource, res.data.slaveImages[1].imageId]
                                        self.distributionform.optionsValue3 = [res.data.slaveImages[2].imageSource, res.data.slaveImages[2].imageId]
                                        self.distributionform.optionsValue4 = [res.data.slaveImages[3].imageSource, res.data.slaveImages[3].imageId]
                                        self.distributionform.optionsValue5 = [res.data.slaveImages[4].imageSource, res.data.slaveImages[4].imageId]
                                        self.distributionform.optionsValue6 = [res.data.slaveImages[5].imageSource, res.data.slaveImages[5].imageId]
                                    }
                                })
                                self.handleItemChange(self.distributionform.optionsValue7)
                            }
                        }
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 表单提交
            DistributionFormSave(formName, tag){
                // tag标记1.保存 2.保存并跳转实验镜像
                let self = this
                self.$refs[formName].validate((valid) => {
                    if (valid) {
                        let data = {}, slaveImageIdsArr = []
                        data.chapterIds = self.multipleSelection
                        data.mode = self.distributionform.resource
                        if(self.distributionform.resource == 1){
                            data.imageId = self.distributionform.optionsValue0[1] ? self.distributionform.optionsValue0[1] : ''
                            data.cpu = self.distributionform.distributedData.cpuValue
                            data.ram = self.distributionform.distributedData.ramValue
                            data.gpu = self.distributionform.distributedData.switchValue

                            if (data.imageId == '') {
                                self.$message.error('请选择镜像')
                                return
                            }
                        }else if(self.distributionform.resource == 2){
                            data.imageId = self.distributionform.optionsValue7[1] ? self.distributionform.optionsValue7[1] : ''
                            data.cpu = self.distributionform.nodeMianData.cpuValue
                            data.ram = self.distributionform.nodeMianData.ramValue
                            data.gpu = self.distributionform.nodeMianData.switchValue
                            data.slaveCpu = self.distributionform.mirrorConfigData.cpuValue
                            data.slaveRam = self.distributionform.mirrorConfigData.ramValue
                            data.slaveGpu = self.distributionform.mirrorConfigData.switchValue

                            if (data.imageId == '') {
                                self.$message.error('请选择主节点镜像')
                                return
                            }

                            if (self.distributionform.virtualStepCurrent == 2) {
                                slaveImageIdsArr.push(self.distributionform.optionsValue1[1])
                                if (self.distributionform.optionsValue1[1] == undefined) {
                                    self.$message.error('请选择从节点1镜像')
                                    return
                                }
                                slaveImageIdsArr.push(self.distributionform.optionsValue2[1])
                                if (self.distributionform.optionsValue2[1] == undefined) {
                                    self.$message.error('请选择从节点2镜像')
                                    return
                                }
                            }else if (self.distributionform.virtualStepCurrent == 4) {
                                slaveImageIdsArr.push(self.distributionform.optionsValue1[1])
                                if (self.distributionform.optionsValue1[1] == undefined) {
                                    self.$message.error('请选择从节点1镜像')
                                    return
                                }
                                slaveImageIdsArr.push(self.distributionform.optionsValue2[1])
                                if (self.distributionform.optionsValue2[1] == undefined) {
                                    self.$message.error('请选择从节点2镜像')
                                    return
                                }
                                slaveImageIdsArr.push(self.distributionform.optionsValue3[1])
                                if (self.distributionform.optionsValue3[1] == undefined) {
                                    self.$message.error('请选择从节点3镜像')
                                    return
                                }
                                slaveImageIdsArr.push(self.distributionform.optionsValue4[1])
                                if (self.distributionform.optionsValue4[1] == undefined) {
                                    self.$message.error('请选择从节点4镜像')
                                    return
                                }
                            }else if (self.distributionform.virtualStepCurrent == 6) {
                                slaveImageIdsArr.push(self.distributionform.optionsValue1[1])
                                if (self.distributionform.optionsValue1[1] == undefined) {
                                    self.$message.error('请选择从节点1镜像')
                                    return
                                }
                                slaveImageIdsArr.push(self.distributionform.optionsValue2[1])
                                if (self.distributionform.optionsValue2[1] == undefined) {
                                    self.$message.error('请选择从节点2镜像')
                                    return
                                }
                                slaveImageIdsArr.push(self.distributionform.optionsValue3[1])
                                if (self.distributionform.optionsValue3[1] == undefined) {
                                    self.$message.error('请选择从节点3镜像')
                                    return
                                }
                                slaveImageIdsArr.push(self.distributionform.optionsValue4[1])
                                if (self.distributionform.optionsValue4[1] == undefined) {
                                    self.$message.error('请选择从节点4镜像')
                                    return
                                }
                                slaveImageIdsArr.push(self.distributionform.optionsValue5[1])
                                if (self.distributionform.optionsValue5[1] == undefined) {
                                    self.$message.error('请选择从节点5镜像')
                                    return
                                }
                                slaveImageIdsArr.push(self.distributionform.optionsValue6[1])
                                if (self.distributionform.optionsValue6[1] == undefined) {
                                    self.$message.error('请选择从节点6镜像')
                                    return
                                }
                            }
                            data.slaveImageIds = slaveImageIdsArr
                        }
                        self.$http.post('/tes/image-allocation/training/'+self.trainingId, data).then(response => {
                            let res = response.data
                            if(res.code == '200'){
                                if(tag == 1){
                                    self.$message({
                                        message: '镜像分配成功',
                                        type: 'success'
                                    })
                                    // 镜像分配弹窗隐藏
                                    self.dialogDistributionFormVisible = false
                                }else{
                                    self.$router.push({
                                        path: '/Teaching/TEnvironmentalTraining/TeacherCreateVirtualMachine'
                                    })
                                }
                            }else{
                                self.$message.error(res.message)
                            }
                        }).catch(err => {
                            console.log(err)
                        })
                    }
                })
            },
            handleItemChange(data) {
                let self = this
                if(data[1]){
                    self.$http.get('/tes/image-allocation/image/'+data[1]).then(response => {
                        let res = response.data
                        if(res.code == '200'){
                            self.distributionform.distributionData = res.data
                        }else{
                            self.$message.error(res.message)
                        }
                    }).catch(err => {
                        console.log(err)
                    })
                }
            }
        }
    }
</script>

<style lang="scss">
    @import "./../../../styles/layout/color_variables";
    #TrainingEnvironmentEdit{
        margin-top: 20px;
        position: relative;
        // 分配镜像弹窗样式
        .dialog-distribution{
            .el-dialog__body{
                min-height:350px;
            }
            .el-form{
                padding: 0 50px;
                .el-dialog__body{
                    position: relative;
                }
                .el-form-item__label{
                    width: 95px;
                }
                .el-select{
                    .el-input__inner{
                        width: 80px;
                    }
                }
                .el-input__icon{
                    line-height: 32px;
                }
                .miror-item{
                    .el-form-item{
                        width: 305px;
                        .el-select{
                            margin-right: 5px;
                            .el-input__inner{
                                width: 150px;
                            }
                        }
                    }
                }
                .config-item{
                    .item-config{
                        width: 340px;
                        .el-select{
                            .el-input__inner{
                                width: 110px;
                            }
                        }
                    }
                    .item-cpu{
                        .el-form-item__error{
                            left: 95px;
                        }
                    }
                    .el-form-item{
                        width: 305px;
                        .el-select{
                            margin-right: 5px;
                        }
                        &.item-distributed{
                            width: 270px;
                            .el-select{
                                .el-input__inner{
                                    width: 180px;
                                }
                            }
                            .el-form-item__error{
                                left: 85px;
                            }
                        }
                        &.item-Gpu{
                            width: 100px;
                            .el-form-item__label{
                                width: 55px;
                            }
                        }
                    }
                }
                .form-title{
                    font-size: 16px;
                    color: #385899;
                    width: 85px;
                    margin-bottom: 15px;
                    text-align: center;
                }
                .el-select{
                    .el-input__inner{
                        width: 180px;
                    }
                }
                .el-cascader{
                    line-height: 32px;
                }
                .item-node{
                    .el-form-item{
                        display: inline-block;
                        width: 330px;
                    }
                }
            }
            .el-dialog__footer{
                text-align: center;
            }
            .button-style{
                min-width: 90px;
            }
            .el-radio-group{
                .el-radio__inner{
                    border-color: #DCDFE6;
                }
                .el-radio{
                    width: 80px;
                }
            }
            .virtual-step{
                width: 288px;
                border-bottom: solid 3px #dfdfdf;
                margin-top: 15px;
                margin-left: 80px;
                ul{
                    li{
                        float: left;
                        width: 19px;
                        height: 19px;
                        line-height: 19px;
                        color: #fff;
                        font-size: 12px;
                        text-align: center;
                        border-radius: 10px;
                        margin: -9px 0 0 0;
                        background: #d9d9d9;
                        cursor: pointer;
                        &:first-child{
                            margin-left: 10%;
                        }
                        &:nth-child(2){
                            margin-left: 29%;
                        }
                        &:last-child{
                            margin-left: 31%;
                        }
                        &.active{
                            background: #1277eb;
                        }
                    }
                }
            }
            .distribution-item{
                width: 208px;
                height: 280px;
                border: solid 1px #e8e8e8;
                border-radius: 4px;
                position: absolute;
                right: 55px;
                top: 95px;
            .jx-course-box{
                    margin-top: 25px;
                    text-align: center;
                    img{
                        width: 155px;
                    }
                    span{
                        display: block;
                        font-size: 14px;
                        color: $title-gray;
                        margin-top: 10px;
                    }
                }
                .jx-course-text{
                    margin: 10px 24px 0;
                    height: 145px;
                    overflow-y: scroll;
                    font-size: 12px;
                    line-height: 16px;
                    color: $table-gray;
                    word-wrap: break-word;
                    &::-webkit-scrollbar {
                        width: 2px;
                    }

                    &::-webkit-scrollbar-thumb {
                        background: #6c6c6c;
                    }
                }
            }
        }
    }
</style>
<style scoped lang="scss">
    #TrainingEnvironmentEdit{
        .edit-title{
            color: #474747;
        }
        .editor{
            font-size: 16px;
            color: #385899;
            i{
                margin-right: 10px;
            }
        }
        .save-btn{
            width: 90px;
            margin: 45px auto 0;
            display: block;
        }
        .virtual-position{
            position: fixed;
            right: 90px;
            bottom: 120px;
            cursor: pointer;
            z-index: 11;
        }
        .ediator{
            clear: both;
            padding-top: 30px;
            position: relative;
            z-index: 11;
            .v-note-wrapper{
                z-index: 9;
                &.fullscreen{
                    z-index: 11;
                }
            }
        }
        .btn-center{
            text-align: center;
            padding: 20px 0;
        }
        .iframse{
            clear: both;
            padding-top: 10px;
            height: 90%;
            overflow-y: scroll;
            &::-webkit-scrollbar {
                width: 5px;
            }

            &::-webkit-scrollbar-thumb {
                background: #c1c1c1;
            }
            .markdown-body{
                padding:0;
            }
        }
        .saveBtn{
            margin-top: 30px;
            overflow: hidden;
        }
    }
</style>
